<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机图片</title>
</head>
<body>
    <!-- 小图 -->
    <div style="background-color:red;border: dotted; width: 64px; height: 90px">
        <img src="img/001.jpg" id="small" style="width: 64px; height: 90px;">
    </div>
    <!-- 大图 -->
    <div style="border: double ;width: 640px; height: 900px; position: absolute; left: 500px; top:10px">
        <img src="" id="big" style="width: 640px; height: 900px; display:none;">
    </div>

    <!-- 开始和结束按钮 -->
    <input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
    <input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 准备一个数组
    let imgs = [
        "img/001.jpg",
        "img/002.jpg",
        "img/003.jpg",
        "img/004.jpg"
    ];
    // 2. 定义计数器变量
    let count = 0;
    // 3. 定义定时器对象
    let time = null;
    // 4. 定义图片路径变量
    let imgSrc = "";
    // 5. 为开始按钮绑定单击事件
    $("#startBtn").click(function () {
        // 6. 设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);
        // 7. 设置定时器，循环显示图片
        time = setInterval(function () {
            // 8. 循环获取图片路径
            let index = count % imgs.length;// 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0
            // 9. 将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);
            // 10. 计数器自增
            count++;
        },100);
    });

    // 1. 为停止按钮绑定单击事件
    $("#stopBtn").click(function () {
        // 2. 取消定时器
        clearInterval(time);
        // 3. 设置按钮状态
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        // 4. 将图片显示到大图片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 640px; height: 900px;");
    });
</script>
</html>